import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// 抽离式组件
import ComHello from './test1'
//引入index2.jsx
import HelloWorld from './index2'
//引入index3.jsx
import RenderProps from './index3'
//引入index4.jsx
import Rou from './index4.jsx'
//引入index5.jsx
import Hook from './index5.jsx'
//引入Appp.js
import App from './App'


// 原生使用react创建标签并挂载
const h4 = React.createElement('h4', { className: 'classname' }, '我是react脚手架创建的h4标签元素')

const h2 = React.createElement('h2', null, '我是脚手架创建的H2标签')

const ul =
  React.createElement('h2', null,
    React.createElement('ul', null,
      React.createElement('li', null, '我是li标签'),
      React.createElement('li', null, '我是li标签')))


// 使用jsx创建页面元素并挂载
const test = (
  <p>我是jsx创建的页面元素</p>
)

const lei = (
  <h2 className='test'>遇见的都是天意，拥有的都是幸运</h2>
)
const gen = (
  <div>
    <h1>我是跟标签div里面的h1属性</h1>
    <input value='我是跟标签里面的input属性,'></input>、
    <h2>在input里面是用value属性出现报错</h2>
  </div>
)


// 在jsx中使用表达式储存数据
const name = 'Brave'
const age = 18
const user = (
  <div>
    <h2>{name}---{age}</h2>
  </div>
)


// 在jsx中使用js语法
function handel() {
  return 1
}
const span = <span>我是BraveY</span>
const p = (
  <div>
    {
      age > 15 ? '已经成年了' : '未成年哦!'
    }
    <br />
    {handel()}
    <br />
    {span}

  </div>
)


// 条件渲染
const isloading = true

const loading1 = () => {
  if (isloading) { return <p>正确</p> }
  return <div>错误1</div>
}
const loading2 = () => {
  return isloading ? (<p>正确</p>) : (<p>错误err</p>)
}
const loading3 = () => {
  return (<p>我是p标签返回值正确</p>) && (<p>我是loading3</p>)
}
const loading = (
  <div>
    <div>{loading1()}</div>
    <div>{loading2()}</div>
    <div>{loading3()}</div>
  </div>
)


// 列表渲染map
const hero = [
  { id: 1, name: '张杰' },
  { id: 2, name: '傻逼' },
  { id: 3, name: '补充一句，张杰我室友' }
]

const list = (
  <div>
    <ul>
      {hero.map(item => <li key={item.id}>{item.id}-------{item.name}</li>)}
    </ul>
  </div>
)


// jsx的样式处理
const style = (
  <div style={{ color: 'red' }}>样式处理</div>
)


// react组件
// 组件渲染方法<Com />
// 1.用函数名创建组件
function Com1() {
  return (
    <h2>我是组件1</h2>
  )
}
const Com2 = () => {
  return <p>我是组件2</p>
}

//2.用类名创建组件
class Com3 extends React.Component {
  render() {
    return (<p>我是类创建的组件3</p>)
  }
}
// 3.抽离js文件创建组件
// import ComHello from './test1'




// React事件绑定
// 1.类写法
class Btn1 extends React.Component {
  handel() {
    console.log('我是react点击事件1')
  }
  render() {
    return (
      <button onClick={this.handel}>点击触发事件</button>
    )
  }
}
// 2.函数写法
function Btn2() {
  function handel() {
    console.log('我是react点击事件2')
  }
  return (
    <button onClick={handel}>点击触发事件2</button>
  )
}
// 3.事件点击对象
class Btn3 extends React.Component {
  handel(e) {
    e.preventDefault()
    console.log('事件点击触发事件')
    console.log(e)
  }
  render() {
    return (
      <a href="www.baidu.com" onClick={this.handel}>点击触发事件3</a>
    )
  }
}


// state的基本用法
// 第一种生命方式
class App1 extends React.Component {
  constructor() {
    super()
    this.state = {
      name: '张杰',
      title: '不是那个张杰'
    }
  }
  render() {
    return (
      <p>获取并使用state：{this.state.name}---{this.state.title}</p>
    )
  }
}

// 第二种声明方式
class App2 extends React.Component {
  state = {
    name: 'Brave'
  }
  render() {
    return (
      <p>获取并使用state：{this.state.name}</p>
    )
  }
}



// 改变this的指向
// 事件方法-----箭头函数
class App3 extends React.Component {
  state = {
    name: 'BraveY',
    age: 18
  }
  add() {
    this.setState({
      age: this.state.age + 1
    })
  }
  render() {
    return (
      <div>
        <button onClick={() => this.add()}>点击+1</button><h2>{this.state.age}</h2>
      </div>
    )
  }
}

// 官方推荐--Function.prototype.bind()
class App4 extends React.Component {
  constructor() {
    super()
    this.state = {
      age: 18
    }
    this.add = this.add.bind(this)
  }
  add() {
    this.setState({
      age: this.state.age + 1
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.add}>点击+1</button>---{this.state.age}
      </div>
    )
  }
}


// class 箭头函数形式
class App5 extends React.Component {
  constructor() {
    super()
    this.state = {
      age: 18
    }
  }
  add = () => {
    this.setState({
      age: this.state.age + 1
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.add}>点击+1</button>----{this.state.age}
      </div>
    )
  }
}








ReactDOM.render(<Hook />, document.getElementById('root'))
